<template>
	<view class="layout">
		<view class="margin-0">
			<view class="phone-width">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft107"
					style="width: 100%;">
					<view class="cu-item" :class="index==TabCur107?'text-green cur':''" v-for="(item,index) in 10" :key="index"
						@tap="tabSelect" :data-id="index">Tab{{index}} </view>
				</scroll-view>
			</view>
		</view>
		<view class="margin-0" style="margin:7rpx 12rpx 12rpx 12rpx;">
			<swiper class="screen-swiper square-dot" style="margin:-1rpx;" :indicator-dots="true" :circular="true"
				:autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList106" :key="index">
					<image :src="item.url" mode="aspectFill">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view style="height:20vh width:20vw;">
			<myMap :points="poits"></myMap>
		</view>

		<view class="goods-cell-title">
			<view class="goods-item-title selected-title">
				<h4 class="h4">标题</h4>
				<view>描述</view>
			</view>
			<!--可以复用结构 -->
		</view>
		<view class="goods-list">

			<view class="goods-item" v-for="item in activateList" :key="item.ID" @click="changePage(`./activate.vue`)">
				<view class="goods-img">
					<!-- 实际图片 -->
					<image :src="item.url" mode="aspectFill"></image>
					<!-- 骨架屏 -->
					<!-- <view v-if="!imageLoaded" style="height: 350rpx; background-color: #eee;"></view> -->
				</view>
				<view class="goods-desc">
					<view class="goods-title">{{ item.title }}</view>
					<view class="goods-bottom">
						<view class="goods-price">
							<span>活动描述</span>
						</view>
					</view>
				</view>
			</view>
			<!--可以复用结构 -->
		</view>
	</view>
</template>


<script>
	import myMap from "./map.vue"
	import {
		testSend
	} from '@/api/activate.js'
	export default {
		components: {
			myMap
		},
		name: "index",
		data() {
			return {
				points: [],
				activateList: null,
				// imageLoaded: false,



				TabCur107: 0,
				scrollLeft107: 0,
				swiperList106: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				cuIconList108: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '录像'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '皮肤'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '发现'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助'
				}, {
					cuIcon: 'commandfill',
					color: 'purple',
					badge: 0,
					name: '问答'
				}, {
					cuIcon: 'brandfill',
					color: 'mauve',
					badge: 0,
					name: '版权'
				}],
				gridCol108: 3,
				gridBorder108: false,


			}
		},
		computed: {},
		components: {},
		methods: {

			changePage(url) {
				console.log("hello world")
				uni.navigateTo({
					url: "/main/run/activate"
				});
			},
		},
		// imageLoaded() {
		// 	this.imageLoaded = true;
		// },

		mounted() {},
		onShow() {
			console.log("============")
			let userInfo = this.$store.state;
			testSend(userInfo).then(res => {
				console.log("res=>", res)
				if (res.statusCode === 200 && res.data.code === 0) {
					this.activateList = res.data.data.list;
					console.log("res.data.list=>", res.data.data.list)
				} else {
					console.error('Fetch failed with response:', res.data);
				}
			})
			// console.log("userInfo=>", userInfo);
			console.log("onShow")
			this.fetchActivateList();
		},
		onLoad() {
			console.log("onLoad");
			this.startGetLocation()
		},
		startGetLocation: function() {
			let that = this;
			uni.startLocationUpdate({
				success: res => {
					uni.onLocationChange(function(res2) {
						uni.showToast({
							title: '经度：' + res2.longitude + '纬度：' + res2.latitude +
								"速度 (m/s)" + res2.speed + "精确:" + res2.accuracy,
							icon: 'none',
						});
						let newPoint = {
							latitude: res2.latitude,
							longitude: res2.longitude,
							speed: res2.speed
						};
						console.log(newPoint)
						that.points.push(newPoint);
						// 动态更新地图轨迹
						// that.setDateByPoints(that.points);

					});
				},
				fail: err => {
					uni.showToast({
						title: err,
						icon: 'none',
					});
				},
				complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
			});
		},


	}
</script>


<style lang="scss" scoped>
	$w_94: 94%;

	.layout {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
		background-color: #f0f2f5; 
		padding: 8px 0;
		background: #f9f9f9;
	}

.nav .cu-item {
  padding: 10px 15px;
  border-radius: 15px; 
  background-color: #eef1f5; 
  color: #666;
  &.cur {
    background-color: #5cb85c;
    color: #fff; 
  }
}


.screen-swiper {
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


	.selected-title {
		>h4 {
			font-size: 30rpx;
			color: #000 !important;
		}

		>view {
			font-weight: bold;

		}
	}

	.goods-cell-title {
		background: #f9f9f9;
		padding: 10px;
		transition: 0.35s;
		display: flex;

		>.goods-item-title {
			flex: 1;
			text-align: center;

			>h4 {
				font-size: 32rpx;
			}

			>view {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		width: 50%;
		margin-bottom: 10px;
		border-radius: 0.4em;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2); // 给商品添加阴影
		  transition: transform 0.3s ease; // 鼠标悬停时轻微放大
		  &:hover {
		    transform: translateY(-5px);
		  }
	}

	.goods-img {
		position: relative;
		margin: 0 auto;
		// width: 158px;
		width: $w_94;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;

		>img {
			width: 100%;
			height: 100%;
		}
	}

	.goods-desc {
		background-color: #ffffff;
		  color: #333; // 字体颜色调整
		  padding: 10px; // 增加内边距
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		width: $w_94;
		background: #fff;
		padding: 8rpx 0 8rpx 8rpx;
		margin: 0 auto;

		>.goods-title {
			font-size: 24rpx;
			height: 67rpx;
			display: -webkit-box;
			font-weight: 500;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		>.goods-bottom {
			display: flex;
			font-weight: bold;

			>.goods-price {
				line-height: 2;


				>span {
					font-size: 42rpx;
				}
			}
		}
	}
</style>